<template>
  <!-- 评论子组件 -->
  <div class="cmt-container">
    <h3>发表评论</h3>
    <hr />
    <textarea placeholder="请输入要评论的内容(最多吐槽120个字)" maxlength="120" v-model="msg"></textarea>
    <mt-button type="primary" size="large" @click="postdata">发表评论</mt-button>
    <div class="cmt-list">
      <div class="cmt-item" v-for="(item,index) of commentlist" :key="index">
        <div
          class="cmt-title"
        >第{{index+1}}楼 &nbsp;&nbsp;用户:{{item.user_name}}&nbsp;&nbsp;发表时间:{{item.add_time | dateformat}}</div>
        <div class="cmt-count">
          <!-- 如果内容为空或者为undefined则返回此用户太懒了 -->
          {{item.content==='' || item.content==='undefined' ? '此用户太懒了':item.content}}
        </div>
      </div>
    </div>
    <mt-button type="danger" size="large" plain @click="getdata">加载更多</mt-button>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
  name: "comment",
  data() {
    return {
      msg: "", //用户输入的评论
      pageindex: 1, //评论的页码
      commentlist: [] //评论的数据
    };
  },
  props: ["artid"],
  created() {
    this.getcomment();
  },
  methods: {
    getcomment() {
      //获取接口评论的数据
      this.$http
        .get("api/getcomments/" + this.artid + "?pageindex=" + this.pageindex)
        .then(result => {
          var data = result.body;
          if (data.status === 0) {
            this.commentlist = this.commentlist.concat(data.message); //concat方法数组的拼接
          } else {
            Toast("请求数据失败");
          }
        });
    },
    getdata() {
      //加载评论页数加1
      this.pageindex++;
      this.getcomment();
    },
    postdata() {
      // 校验是否为空内容
      if (this.msg.trim().length == 0) {
          Toast({
                message: "评论的内容不能为空",
                position: "center",
                duration: 2000
              });
      } else {
        // 发表评论
        // 参数1： 请求的URL地址
        // 参数2： 提交给服务器的数据对象 { content: this.msg }
        // 参数3： 定义提交时候，表单中数据的格式  { emulateJSON:true }  每次post请求都要加，不加会跨域，所以要进行全局配置
        this.$http
          .post("api/postcomment/" + this.artid, { content: this.msg })
          .then(result => {
            var data = result.body;
            if (data.status === 0) {
              Toast({
                message: data.message,//弹出内容
                position: "center",//内容居中显示
                duration: 2000//弹出多少秒
              });
              // 加了个定时器
              setTimeout(() => {
                let nowdata = {
                  user_name: "匿名用户",
                  add_time: new Date(),
                  content: this.msg
                };
                // unshift() 方法可向数组的开头添加一个元素
                this.commentlist.unshift(nowdata);
                this.msg = ""; //清空评论框内容
              }, 2000);
            }
          });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.cmt-container {
  h3 {
    font-size: 0.36rem;
    font-weight: 700;
  }
  textarea {
    height: 2rem;
    font-size: 0.28rem;
    margin: 0.1rem 0;
  }
  .cmt-list {
    margin: 0.1rem 0;
    .cmt-item {
      font-size: 0.28rem;
      .cmt-title {
        background-color: #ccc;
        line-height: 0.7rem;
      }
      .cmt-count {
        text-indent: 2em;
        line-height: 0.8rem;
      }
    }
  }
}
</style>